<template>
        <div id="app">
            <div>{{mse}}</div>
            <input v-model='search' />
            <span @click="paixu('price',false)">顺序</span>
            <span @click="paixu('price',true)">降序</span>
            <ul v-if="searchData.length > 0">
                <li v-for="item in searchData">{{item.name}},价格:￥{{item.price}}</li>
            </ul>
            <div v-else>暂无数据</div>
        </div>
    </template>
          
    <script>
        import bus from '../assets/eventBus'
        export default {
        name: 'slidemenu',
        data () {
            return {
                search: '',
                products: [{
                    name: '苹果',
                    price: 25,
                    category: "水果"
                }, {
                    name: '香蕉',
                    price: 15,
                    category: "水果"
                }, {
                    name: '雪梨',
                    price: 65,
                    category: "水果"
                }, {
                    name: '宝马',
                    price: 2500,
                    category: "汽车"
                }, {    
                    name: '奔驰',
                    price: 10025,
                    category: "汽车"
                }, {
                    name: '柑橘',
                    price: 15,
                    category: "水果"
                }, {
                    name: '奥迪',
                    price: 25,
                    category: "汽车"
                }],
                letter:'',       //默认不排序
                original:false,   //默认从小到大排列
                mse:'默认数据',
            }
        },
        mounted(){
            console.log('divclick')
            var self = this;
            bus.$on('hanshu',function(mse){
                self.mse = mse;
            })
        },
        methods:{
            paixu(a,b){
                this.letter = a;
                this.original = b;
            }
        },
        computed: {
            searchData(){
                var arr = [];
                for(var i=0;i<this.products.length;i++){
                    if(this.products[i].name.search(this.search) != -1){
                        arr.push(this.products[i])
                    }
                }
                if(this.letter !== ''){
                    arr.sort((a,b)=>{
                        if(this.original){
                            return b[this.letter] - a[this.letter]//从小到大
                        }else{
                            return a[this.letter] - b[this.letter]//从大到小
                        }
                    })
                }
                return arr
            },
           
        },
     }
    </script>
    <style scoped>
         
    </style>
          